<template>
	<b-layout-index>


		<navbar :title="$t('银行卡')"></navbar>
		<view class="mg-10">

			<view class="card br-rd-10 pd-10 color-white" :style="{'backgroundColor':info.color}">
				<u-cell :border="false">
					<iconfont slot="icon" size="30" color="#fff" :icon="info.icon" />
					<view slot="title" class="color-white text-indent font-size-14">
						<text>{{info.name}}</text>
					</view>
					<view slot="value" class="color-white font-size-10">{{info.status==2?$t('网商银行'):$t('储蓄卡')}}</view>

				</u-cell>
				<view class="color-white text-indent font-bold font-size-24 text-center number mg-bottom-20">
					<text>{{info.cardNo}}</text>
				</view>
			</view>

			<view class="card br-rd-10 pd-10 bg-white mg-top-10">

				<u-cell-group :border="false" :title="$t('基本信息')">
					<u-cell :border="false" v-for="(item,index) in cards">
						<view slot="title" class="font-bold font-size-12">
							<u--text type="info" size="12" :text="$t(item.name)"></u--text>
						</view>
						<view slot="value" class=" font-size-12 ltr">
							<u--text v-if="item.type=='cardType'" size='12'
								:text="info.status==2?$t('网商银行'):$t('储蓄卡')"></u--text>
							<u--text v-else-if="item.type=='cardName'" mode="name" size='12'
								:text="info.name"></u--text>
							<u--text v-else-if="item.type=='userName'" mode="name" size='12'
								:text="info.userName"></u--text>
							<u--text v-else-if="item.type=='bindPhone'" mode="phone" size='12' :text="info.phone"
								format="encrypt"></u--text>
							<u--text v-else :mode="item.type" size='12' :text="$t(item.value)"></u--text>
						</view>
					</u-cell>
				</u-cell-group>
				
	<view v-if="info.image" class="text-center">
					<image class="qrcode" mode="widthFix" :src="info.image"></image>
	</view>
			</view>
			<view class="card br-rd-10 pd-10  mg-top-10">
				<u-button type="primary" @click="showMadal" :color="color.primary" shape="circle" :plain="true"
					:text="$t('解绑卡包')"></u-button>
			</view>





		</view>


		<u-modal :show="show" @confirm="uniBind" @cancel="cancelModal" :confirmColor="color.primary"
			:cancelText="$t('取消')" :confirmText="$t('确认')" :title="$t('提示')" :showCancelButton="true">
			<view>
				{{$t('把你的卡解绑确定要吗')}}
			</view>
		</u-modal>
	</b-layout-index>
</template>

<script>
	//getByBanksMyList
	import {
		findMyBankCardByInfo,
		findMyBankCardByUnbind
	} from "@/api/bank.js"
	export default {

		data() {
			return {
				show: false,
				id:0,
				info: {
					bankId: 0,
					cardNo: "",
					color: "",
					icon: "",
					id: 35,
					name: "",
					phone: "",
					status: 0,
					type: 0,
					userName: ""
				},
				cards: [{
					name: "持卡人",
					value: "",
					type: "userName"
				}, {
					name: "开户银行",
					value: "",
					type: "cardName"
				}, {
					name: "卡片类型",
					value: "",
					type: "cardType"
				}, {
					name: "绑定手机",
					value: "",
					type: "bindPhone"
				}, {
					name: "账户余额",
					value: "***",
					type: "blance"
				}, {
					name: "可用额度",
					value: "50000",
					type: "price"
				}]
			}
		},
		onLoad: function(options) {
					this.id=options.id;
	console.log(options)
		},
		onShow: function(options) {
			console.log(options)
	
			this.getData(this.id)
		},
		methods: {
			getData: function(id) {
				var the = this;
				findMyBankCardByInfo(id).then(res => {
					console.log(res)
					the.info = res
				})
			},
			showMadal: function() {
				this.show = true;
			},
			cancelModal: function() {
				this.show = false;
			},
			uniBind: function() {
				var the = this;
				findMyBankCardByUnbind(this.info.id).then(res => {
					uni.showToast({
						title: the.$t("操作成功"),
						success() {
							uni.navigateBack()
						}
					})
				}).catch(e=>{
					uni.showToast({
						title: the.$t("操作失败")
					})
				})
				/* uni.showModal({
					title:"Test",
					content:"HHH",
					cancelText:this.$t("取消"),
					confirmText:this.$t('确认'),
					confirmColor:this.color.primary,
					success() {
						//findMyBankCardByUnbind(this.info.id)
					}
				}) */

			}
		}
	}
</script>

<style>
	page {
		background-color: #eee !important;
		color: #14313f !important;


	}

	.bgbb {
		background-color: #fff !important;
	}

	.text-indent {
		text-indent: 10px;
	}

	.number {
		font-size: 36px;
		letter-spacing: 4px;
		font-family: monospace;
	}
	.qrcode{
		width: 150px;
		border-radius: 10px;
	}
</style>